<template>
  <div class="hello">
    <!-- <h1>{{ msg }}</h1> -->
        <div class="top">
          <div class="div_top1">
            <div class="div_top2">
              <img src="../assets/image/header-1-2575ae78.png" style="width: 150px;height: 100px; padding-left: 26px; padding-top: 14px;">
            </div>

            <div class="div_top3">
                早上好！欢迎回来！
            </div>

            <p class="div_top4">
              开源等于互助；开源需要大家一起来支持，支持的方式有很多种，比如使用、推荐、写教程、保护生态、贡献代码、回答问题、分享经验、打赏赞助等；欢迎您加入我们
            </p>
        </div>
        <div class="div_top5">
            <img src="../assets/image/coffee-d68d7748.png" style="width: 80px;height: 83px; padding-top: 4px;" class="img1">
            <div>
              {{this.str}}
            </div>
        </div>
      </div>

      <div class="centre">
          <div class="div_centre">

          </div>
          <div class="div_centre">

          </div>
          <div class="div_centre">

          </div>
          <div class="div_centre">

        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
  return{
    rptType: false,//状态
          h:0,//定义时，分，秒，毫秒并初始化为0；
          m:0,
          ms:0,
          s:0,
          time:0,
          str:'',
  }
  },
  mounted:function(){
    this.$nextTick(function () {//整个视图都渲染完毕
    this.receipt()
    this.notime=window.sessionStorage.getItem('X_no_time')
  })
  },
  methods:{
  getTask: function(e){
    this.taskType = e;
  },
  //开始
  receipt: function() {
    this.rptType = !this.rptType;
    if(this.rptType){
    this.time=setInterval(this.timer,50);
    }else{
      this.reset()
    }
  },
  timer: function(){   //定义计时函数
      this.ms=this.ms+50;         //毫秒
      if(this.ms>=1000){
        this.ms=0;
        this.s=this.s+1;         //秒
      }
      if(this.s>=60){
        this.s=0;
        this.m=this.m+1;        //分钟
      }
      if(this.m>=60){
        this.m=0;
        this.h=this.h+1;        //小时
      }
      //this.str =this.toDub(this.h)+":"+this.toDub(this.m)+":"+this.toDub(this.s)+""/*+this.toDubms(this.ms)+"毫秒"*/;
      // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";

      this.str ="您今天已工作了"+this.toDub(this.h)+"时"+this.toDub(this.m)+"分"+this.toDub(this.s)+"秒"
      window.sessionStorage.setItem('X_no_time', "您今天已工作了"+this.toDub(this.h)+"时"+this.toDub(this.m)+"分"+this.toDub(this.s)+"秒") // 存入本地
  },
  toDub: function(n){  //补0操作
      if(n<10){
        return "0"+n;
      }
      else {
        return ""+n;
      }
  },
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.head{
  width: 300px;
  height: 300px;
  background-color: #e9edf2;
}
.top{
  width: 1280px;
  height: 150px;
  margin-top: 10px;
}
.div_top1{
  width: 900px;
  height: 130px;
  background-color: #e1eaf9;
  transition: transform 0.3s;
  border-radius: 6px;

}
.div_top1:hover{
  transition: all 0.2s;
  cursor:pointer;
  transform: scale(1.01) ; 
  box-shadow:3px 3px 10px #cacaca
}
.div_top2{
  float: left;
}
.div_top3{
  width:200px;
  height: 30px;
  float: left;
  color: #3f6ad8;
  font-size: 22px;
  margin-top: 15px;
  margin-left: 15px;
}
.div_top4{
  width:600px;
  height: 30px;
  float: left;
  font-size: 16px;
  text-align: left;
  margin-left: 15px;
}
.div_top5{
  width: 300px;
  height: 130px;
  float: right;
  margin-right: 60px;
  margin-top: -122px;
  border-radius: 6px;
  transition: transform 0.3s;
}
.div_top5:hover{
  transition: all 0.2s;
  cursor:pointer;
  transform: scale(1.03) ; 
}
.centre{
  width: 1280px;
  height: 150px;
  margin-top: 10px;
}
.div_centre{
  width: 290px;
  height: 150px;
  float: left;
  margin-right: 25px;
  background-color: #e9edf2;
}
.div_centre:hover{
  transition: all 0.2s;
  cursor:pointer;
  transform: scale(1.03) ; 
  box-shadow:3px 3px 10px #cacaca
}
</style>
